<template>
  <div class="header">
    <div class="head-box">
      <div class="top-head">
        <div class="content">
          <div class="address">
            <span class="city2">{{$store.state.city}}</span>
            <span class="city-btn" @click="checkCity">[切换]</span>
          </div>
          <div class="phone">
            <p>商家服务热线：<span>0731-83869360</span></p>
            <p>客服服务热线：<span>0731-83869360</span></p>
          </div>
          <div class="regist">
            <router-link tag='a' :to="'/regist'" style="margin-right:10px;">注册</router-link>
            <router-link tag='a' :to="'/login'" v-if="$store.state.islogin == ''">登录</router-link>
            <router-link tag='a' :to="'/personalCenter'" v-if="$store.state.islogin == 'Personal'" style="margin-right:10px;">个人中心</router-link>
            <a style="margin-right:10px;cursor:pointer;" @click="goCompany" v-if="$store.state.islogin == 'Company'">企业中心</a>
            <a style="cursor: pointer" v-if="$store.state.islogin == 'Personal'" @click="exit">退出登录</a>
            <a style="cursor: pointer" v-if="$store.state.islogin == 'Company'" @click="exit2">退出登录</a>
          </div>
        </div>
      </div>
      <div class="bottom-head">
        <div class="content">
          <div class="logo">
            <a style="cursor:pointer" @click="goIndex"><img src="../../assets/image/logo.png"></a>
          </div>
          <div class="nav-text">
            <ul>
              <li v-for="(item, index) in navData" :key="index" @click="goNav(item)">
                <a style="cursor:pointer" :class="[item.id == id ? 'cur':'']" >{{item.text}}</a>
                <span :class="[item.id == id ? '':'hidden']"></span>
              </li>
            </ul>
          </div>
          <div class="nav-ad">
            <a target="_black" :href="item.url" class="ca-img" v-for="(item, index) in adData" :key="index" v-if="index<1">
              <img :src="item.image">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {
      id: '1',
      navData: [
        {
          text: '首页',
          link: 'index',
          id: '1'
        },
        {
          text: '装修效果图',
          link: 'imgcase',
          id: '2'
        },
        {
          text: '装修公司',
          link: 'company',
          id: '3'
        },
        {
          text: '设计师',
          link: 'design',
          id: '4'
        }
      ],
      adData: []
    }
  },
  methods: {
    goIndex () {
      this.id = '1'
      this.$router.push({
        name: 'index'
      })
    },
    goNav: function (item) {
      this.id = item.id
      this.$router.push({
        name: item.link
      })
    },
    getAd: function () {
      var that = this
      that.$axios.request('/AdvertInfo/GetAdvert', {
        Position: '1',
        Pageindex: 0,
        Pagelimit: 3
      })
        .then((res) => {
          if (res.code === 0) {
            that.adData = res.data.datalist[0]
          }
        })
    },
    goCompany: function () {
      window.location.href = this.$axios.link2 +'/#/inforAdd'
    },
    checkCity () {
      var that = this
      that.$router.push({
        name: 'citys'
      })
    },
    exit () {
      var that = this
      that.$axios.request('/Account/LoginOut')
        .then((res) => {
          if (res.code === 0) {
            that.$axios.alert('退出成功', '提示', function() {
                that.$router.push({name: 'index'})
                that.$store.commit('islogin', '')
              })
          }
        })
    },
    exit2 () {
      var that = this
      $.ajax({
        url: that.$axios.link + '/Account/LoginOut',
        type: 'get',
        dataType: 'jsonp',
        xhrFields: {
          withCredentials: true
        },
        success: function (data) {
          if (data.code === 0) {
            that.$axios.alert('退出成功', '提示', function() {
              that.$router.push({name: 'index'})
              that.$store.commit('islogin', '')
            })
          }
        },
        error: function (data) {
        }
      })
    }
  },
  mounted () {
    var that = this
    that.getAd()
    var link = that.$route.path.split('/')[1]
    for (var n = 0; n < that.navData.length; n++) {
      if (that.navData[n].link === link) {
        that.id = that.navData[n].id
      }
    }
    if (link === 'designDetail') {
      that.id = '4'
    }
    if (link === 'imgcaseDetail') {
      that.id = '2'
    }
    if (link === 'companyDetail') {
      that.id = '3'
    }
  },
  watch: {
    $route(to) {
      var that = this
      var link = to.name
      for (var n = 0; n < that.navData.length; n++) {
        if (that.navData[n].link === link) {
          that.id = that.navData[n].id
        }
      }
    }
  }
}
</script>

<style>
</style>
